<template>
	<el-dialog title="确认考试" :visible.sync="dialogVisible" top="0" append-to-body class="confirm_exam_dialog">
		<el-row class="exam_info_wrapper">
			<el-col :span="24">
				<div class="label">考试名称</div>
				<div class="body">{{ examData.name }}</div>
			</el-col>
			<el-col :span="24">
				<div class="label">考试时长</div>
				<div class="body">{{ examData.examDuration }}分钟</div>
			</el-col>
			<el-col :xs="24" :sm="12">
				<div class="label">考试总分</div>
				<div class="body">{{ examData.testPaper?.totalScore }}分</div>
			</el-col>
			<el-col :xs="24" :sm="12">
				<div class="label">及格分数</div>
				<div class="body">{{ examData.passScore | formatDecimal(1) }}分</div>
			</el-col>
			<el-col :span="24">
				<div class="label">考试须知</div>
				<div class="body">{{ examData.testInstructions || '无' }}</div>
			</el-col>
		</el-row>
		<template slot="footer">
			<el-button size="medium" @click="dialogVisible = false">取消</el-button>
			<el-button size="medium" type="primary" @click="handleConfirmExam()">确定</el-button>
		</template>
	</el-dialog>
</template>

<script>
import { examDetail } from '@/api/exam/testExam';
export default {
	data() {
		return {
			dialogVisible: false,
			examData: {}
		};
	},
	mounted() {
		this.$bus.$on('examConfirm', (id) => {
			this.dialogVisible = true;
			this.getExamInfoData(id);
		});
	},
	destroyed() {
		this.$bus.$off('examConfirm');
	},
	methods: {
		//获取考试信息数据
		async getExamInfoData(id) {
			let result = await examDetail(id).then((res) => res.data);
			if (result.code === '0') {
				this.examData = this.$detailData(result.data);
			}
		},

		//点击进入考试
		handleConfirmExam() {
			this.dialogVisible = false;
			this.$router.push({ path: '/front/courseExam', query: { id: this.examData.id } });
		}
	}
};
</script>
<style lang="scss">
.confirm_exam_dialog .el-dialog {
	max-width: 600px;
}
</style>
<style lang="scss" scoped>
.exam_info_wrapper {
	width: 100%;
	border-top: solid 1px #ebeef5;
	border-left: solid 1px #ebeef5;
	.el-col {
		display: flex;
		align-items: flex-start;
		border-right: solid 1px #ebeef5;
		border-bottom: solid 1px #ebeef5;
	}
	.label,
	.body {
		padding: 12px;
		font-size: 15px;
		line-height: 24px;
	}
	.label {
		width: 90px;
		flex-shrink: 0;
		box-sizing: border-box;
		background-color: #f2f6fc;
		border-right: solid 1px #ebeef5;
	}
	.body {
		flex: 1;
		overflow: hidden;
	}
}
</style>
